<template>
  <div class="box">
    <Header class="header" />
    <!-- <Contents class="contents">
      
    </Contents> -->
    <component :is="show" class="content"></component>
    
    <LookLook/>
  <Footer class="footer-box"/>
  </div>

</template>

<script>
import axios from "axios";
import Header from "./son-components/Header";
import Contents from "./son-components/Contents";
import Cartgoods from "./son-components/cartgoods.vue";
import LookLook from "./son-components/LookLook";
import Footer from './son-components/Footer.vue';
export default {
  name: "Cart",
  components:{
      Header,Contents,LookLook,Footer,Cartgoods

  },
  data(){
    return{
      show:"Contents"
    }

  },
   methods: {
   
  },
  created() {
    
    axios({
      url: "/cart"
    }).then((res) => {
      console.log(res.data);
      this.arr=res.data;
     if(this.arr){
       this.show="Cartgoods"
     }else{
       this.show="Contents"
     }
    });
  },
  
};
     
</script>

<style scoped>

.box{
  width: 100%;
  height: 100%;
}

.header{
  position: fixed;
  top:0;
  left:0;
}

.content-box{
  padding-top: 0.55rem;
  padding-bottom: 0.5rem;
}
.content{
  overflow-y: auto;

}
.books{
  margin-top: 0.1rem;
}


.footer-box{
  position: fixed;
  bottom:0;
  left:0;
}
</style>
